<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const food = ref('loangjiang')
const drink = ref('liangcha')

// 侦听器
watch(food, () => {
  console.log('henhao')
})

watch([food, drink], () => {
  console.log('henhao')
})

const foodObj = reactive({
  name: '麻辣烫',
  price: 15,
  drink: {
    name: 'kuaileshi',
    price: 4,
  },
})

// 只监听某个属性的改变(基本类型)
// watch(
//   () => foodObj.price,
//   () => {
//     console.log('zhangjiala~')
//   }
// )

// 参数1设置监听的数据，或者属性
// 参数2数据改变之后的回调函数
// 参数3一些配置，比如深度监听

watch(
  () => foodObj.drink,
  () => {
    console.log('zhangjiala~')
  },
  {
    deep: true, //深度监听
    immediate: true, //是否默认执行一次
  }
)
</script>

<template>
  <h2 @click="food += '很好吃'">{{ food }}</h2>
  <h2 @click="food += '很好he'">{{ drink }}</h2>
  <button @click="foodObj.name += '!'">改名字</button>
  <button @click="foodObj.price++">改价格</button>
  <button @click="foodObj.drink.name += 'haohe'">快乐水</button>
  <button @click="foodObj.drink.price++">快乐水</button>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
